<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
    <style type="text/css">
           .container>.navbar-right{
               height: 40px;
               line-height: 40px;
               color: #ffffff;
               font-size:12px;
               float: right;
               padding-right: 30px;
           }
           #Header{
               background: #444;
           }
           .container-fluid{
               background: rgba(0,0,0,0.8);
           }
           .navbar-right>li>a{
               color: #ffffff !important;
           }
           .navbar-right>li>a:hover{
               opacity: 0.5;
               transition: opacity 1s ;
           }
           @media screen and (max-width:768px) {
               .container-fluid>.container>.navbar-header{
                   text-align: center;
               }
               .navbar-header>.navbar-brand{
                   display: inline-block;
                   margin-top: 12px;
                   float: none;
                   height: auto;
                   padding: inherit;
               }
               .jumbotron>p:nth-of-type(1){
                   font-size:44px !important;
               }
               .jumbotron>p:nth-of-type(2){
                   font-size: 22px !important;
               }
               .appleOther>p:nth-of-type(1){
                   font-size:32px !important;
               }
               .appleOther>p:nth-of-type(2){
                   font-size: 19px !important;
               }
               .appleOther{
                   padding-top: 30px;
                   padding-bottom: 30px;
               }
               .list-unstyled{
                   display: none;
               }
               .about h4{
                   margin-bottom: 0;
                   padding-top: 10px;
                   padding-bottom: 10px;
                   background-color: #f2f2f2;
                   cursor: pointer;
                   font-size: 12px;
                   line-height: 1.5em;
                   font-weight: 400;
                   border-bottom: 1px solid lightgrey;
               }
               .about h4:after{
                   content: '+';
                   float: right;
                   font-size: 14px;
                   font-weight: normal;
                   margin-top: -2px;
                   margin-right: 8px;
                   transition: transform .3s ease,-webkit-transform .3s ease;
               }
               .footer>.container{
                   padding-top: 0px !important;
               }
               .list-unstyled>li>a{
                   padding: 6px 14px;
                   color: #555;
                   text-decoration: none;
                   font-size: 10px;
               }
           }
           .popoverBorder{
               border-bottom:1px solid #e3e3e3;
           }
           .popoverColor{
            color: #0070c9;
           }
           .media:hover{
               cursor: pointer;
           }
           .jumbotron>h1{
               text-align: center;
           }
           .jumbotron>p{
               text-align: center;
               color: #111;
           }
           .jumbotron>p:nth-of-type(1){
               font-size:56px;
           }
           .jumbotron>p:nth-of-type(2){
               font-size: 27px;
           }
           #banner{
               background-color: #ffffff;
           }
           .appleOther>p{
               text-align: center;
               color: #111;

           }
           .appleOther>p:nth-of-type(1){
               font-size:48px;
           }
           .appleOther>p:nth-of-type(2){
               font-size: 24px;
           }
           .appleOther>h1{
               text-align: center;
           }
           .twoItems{
               overflow: hidden;
           }
           .appleOther{
               background-color: #fafafa;
               border-left: 12px solid #ffffff;
               border-right: 12px solid #ffffff;
               padding-top: 48px;
               padding-bottom: 48px;
           }
           .footer{
               background-color: #f2f2f2;
               padding: 0 22px;
               margin-top: 12px;
           }
           .footer>.container{
               padding-top: 40px;
           }
           .footerRotate:after{
           -webkit-transform:rotate(45deg) scale(1.08) !important;
           }
    </style>
</head>
<body>
      <nav id="Header" class="nav navbar-default">
          <!--广告部分-->
          <div  class="container">
                <div class="navbar-right">
                    &lt;广告&gt;
                </div>
          </div>
          <!--第二层导航部分-->
          <div class="container-fluid">
             <div class="container">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">
                      <img alt="Brand" src="imgs/applelog.png">
                  </a>
              </div>
              <div id="navbar" class="collapse navbar-collapse">

                <ul class="nav navbar-nav navbar-right">
                  <li>
                      <a href="#">Mac</a>
                  </li>
                  <li>
                      <a href="#">iPad</a>
                  </li>
                  <li>
                      <a href="#">iPhone</a>
                  </li>
                  <li>
                      <a href="#">Watch</a>
                  </li>
                  <li>
                      <a href="#">Music</a>
                  </li>
                  <li>
                      <a href="#">技术支持</a>
                  </li>
                  <li>
                      <a href="#">搜索</a>
                  </li>
                    <li>
                        <a id="poperId" href="#"  >商店</a>
                    </li>
                 </ul>
              </div>
             </div>
          </div>
          <!--静态窗口部分-->
          <!-- 模态框（Modal） -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal"
                                  aria-hidden="true">×
                          </button>
                          <h4 class="modal-title" id="myModalLabel">
                              登录信息
                          </h4>
                      </div>
                      <div class="modal-body">
                          <form class="form-horizontal" role="form">
                              <div class="form-group">
                                  <label for="firstname" class="col-sm-2 control-label">用户名</label>
                                  <div class="col-sm-10">
                                      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label for="lastname" class="col-sm-2 control-label">密码</label>
                                  <div class="col-sm-10">
                                      <input type="password" class="form-control" id="lastname" placeholder="请输入密码">
                                  </div>
                              </div>
                          </form>
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-default"
                                  data-dismiss="modal">关闭
                          </button>
                          <button type="button" class="btn btn-primary">
                              登录
                          </button>
                      </div>
                  </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
      </nav>
      <header id="banner">
          <!--banner-->
          <!--iphone8-->
          <header style="background-color: #f9f0eb" class="jumbotron">
              <p class="lead">iPhone 8</p>
              <p class="text">新一代iPhone</p>
              <h1>
                  </span> <img class="logo" src="imgs/iphone_8_large.jpg"></span>
              </h1>
          </header>
          <!--iphonex-->
          <header style="background-color: #fafafa" class="jumbotron">
              <p class="lead">iPhone X</p>
              <p class="text">hello,未来。</p>
              <h1>
                  </span> <img class="logo" src="imgs/iphone_x_large.jpg"></span>
              </h1>
          </header>
         <!--两个产品一行-->
          <header class="twoItems" >
              <div class="col-md-6 col-lg-6 col-sm-12 appleOther">
                  <p class="lead">iOS 11</p>
                  <p class="text">现已推出</p>
                  <h1>
                      </span> <img class="logo" style="height: 392px" src="imgs/ios_large.jpg"></span>
                  </h1>
              </div>
              <div class="col-md-6 col-lg-6 col-sm-12 appleOther">
                  <p class="lead">watchOS 4</p>
                  <p class="text">现已推出</p>
                  <h1>
                      </span> <img class="logo" src="imgs/watchos_large.jpg"></span>
                  </h1>
              </div>
          </header>
         <!--footer-->
          <footer class="footer ">
              <div class="container">

                  <div class="row footer-top">
                      <div class="col-sm-12  col-lg-12 col-lg-offset-1">

                          <div class="row about">
                              <div class="col-xs-12 col-sm-4 col-sm-4" >
                                  <h4 class="footerH4">选购及了解</h4>
                                  <ul class="list-unstyled">
                                      <li><a href="#">Mac</a></li>
                                      <li><a href="#">iPad</a></li>
                                      <li><a href="#">iPhone</a></li>
                                      <li><a href="#">Watch</a></li>
                                      <li><a href="#">Music</a></li>
                                      <li><a href="#">iTunes</a></li>
                                      <li><a href="#">iPod touch</a></li>
                                  </ul>
                              </div>
                              <div class="col-xs-12 col-sm-4 col-sm-4">
                                  <h4 class="footerH4">账户</h4>
                                  <ul class="list-unstyled">
                                      <li><a href="#">管理你的Apple ID</a></li>
                                      <li><a href="#">Apple Store账户</a></li>
                                      <li><a href="#">iCloud.com</a></li>
                                      <li><a href="#">Mac</a></li>
                                  </ul>
                              </div>
                              <div class="col-xs-12 col-sm-4 col-sm-4">
                                  <h4 class="footerH4">关于Apple</h4>
                                  <ul class="list-unstyled">
                                      <li><a href="#">Newsroom</a></li>
                                      <li><a href="#">Apple管理层</a></li>
                                      <li><a href="#">工作机会</a></li>
                                      <li><a href="#">活动</a></li>
                                      <li><a href="#">联系Apple</a></li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
                  <hr>
                  <div class="row footer-bottom">
                      <ul class="list-inline text-center">
                          <li><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></li><li>京公网安备11010802014853</li>
                      </ul>
                  </div>
              </div>
          </footer>
      </header>
</body>
   <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
   <script type="text/javascript" src="js/index.js"></script>
   <script type="text/javascript">
            var _thisindex = -1;
//            绑定popover事件
            indextool.blindPoverBottom();
//
            indextool.cancleBlindPopover();
//            绑定媒体查询
            indextool.changImg();
   </script>
</html>